<template>
    <div class="activity-box">
      <div :class="type=='home'?'pay_ing':''">
        <van-tabs v-if="activity_list && activity_list.length>0"  v-model="active" @click="change" :ellipsis="false" >
          <van-tab :title="item.title" :name="item.id" :title-class="{'show-subing':item.is_buying}" v-for="(item, i) in activity_list" :key="i" ></van-tab>
        </van-tabs>
      </div>
      <van-tabs v-model="active1" class="status-box" @click="handle" swipeable>
        <van-tab :title="item.title" :name="item.value" v-for="(item, i) in list" :key="i"></van-tab>
      </van-tabs>
    </div>
</template>
<script>
export default {
  props: {
    activity_list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: "home"
    }
  },
  activated(){

    if (this.type == "onself") {
      this.list = this.list.filter(item => item.value !== 1);
      this.url = "plugin.subscription.frontend.modules.member.controllers.stage.index";
    } else {
      this.url = "plugin.subscription.frontend.modules.activity.controllers.detail.index";
    }
    this.active = this.activity_list[0].id;
    this.getData()
  },
  data() {
    return {
      list: [
        { title: "认购活动", value: 0 },
        { title: "待发放", value: 3 },
        { title: "认购失败", value: -1 },
        { title: "结算重开", value: 6 },
        { title: "已完成", value: 5 }
      ],
      active: 0,
      active1: 0,
      url: "",
    };
  },
  methods: {
    getData(){
       $http
        .post(this.url, {
          activity_id: this.active,
          stage_status: this.active1
        })
        .then(res => {
          if (res.result == 0) {
            this.$toast(res.msg);
          }
          if (this.type == "onself") {
            this.$emit("activeInfo", { data: res.data,active_current:this.active, active_status: this.active1, type: "onself" });
          } else {
            this.$emit("activeInfo", { data: res.data, active_current:this.active,active_status: this.active1,type:"home"  });
          }
        });
    },
    change() {
     this.getData()
    },
    handle() {
      this.getData()
    },
  },
};
</script>
<style scoped lang="scss">
.pay_ing {
  padding-top: 1rem;

  ::v-deep .van-tabs__wrap {
    height: 4.2rem;
  }

  ::v-deep .van-tabs__line {
    bottom: 25px;
  }

  .van-tab {
    height: 3.75rem;
  }

  ::v-deep .show-subing {
    position: relative;

    &::after {
      content: "认购中";
      position: absolute;
      width: 3.4rem;
      left: 50%;
      top: 0;
      text-align: center;
      transform: translateX(-50%);
      background: #f00b0b;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 100);
      border-radius: 0.19rem;
    }
  }
}

.activity-box::-webkit-scrollbar {
  display: none;
}

.activity-box {
  margin: 0.5rem 0;
  width: 100%;
  background-color: #fff;
  border-radius: 0.31rem;
  overflow: hidden;

  .head {
    padding-top: 1rem;
    height: 4rem;
    margin-bottom: 1rem;
  }

  .status-box {
    ::v-deep .van-tabs__wrap::-webkit-scrollbar {
      display: none;
    }

    ::v-deep .van-tabs__wrap {
      // overflow-y: hidden;
      overflow-x: auto;

      .van-tabs__line {
        display: none;
      }

      .van-tab {
        padding: 0 0.4rem;
        text-align: center;
        line-height: 1.31rem;
        font-size: 0.69rem;
        color: #484848;

        .van-tab__text {
          background-color: #e1e1e1;
          border-radius: 0.66rem;
          width: 4rem;
        }
      }

      .van-tab--active {
        .van-tab__text {
          color: #fff;
          background-color: #f14e4e;
        }
      }
    }
  }
}
</style>
